<template>
  <div class="tab-content">
    <div class="w-[765px] pt-[10px]">
      <el-form
        ref="ruleForm"
        :v-loading="loading"
        :model="form"
        :rules="rules"
        label-position="left"
        hide-required-asterisk
      >
        <!--  产业介绍 -->
        <el-form-item label="" prop="industryDesc" class="row-all">
          <template #label>
            <div>产业介绍</div>
          </template>
          <el-input
            v-model="form.industryDesc"
            :disabled="disabled"
            type="textarea"
            :rows="3"
            maxlength="300"
            show-word-limit
            placeholder="300字以内文字描述"
          ></el-input>
        </el-form-item>
        <!-- 主导产业 -->
        <el-form-item label="" prop="mainIndustry" class="row-all">
          <template #label>
            <div class="form-label">主导产业</div>
          </template>
          <el-cascader
            id="mainIndustry"
            ref="mainIndustry"
            v-model="form.mainIndustry"
            :disabled="disabled"
            class="w-full"
            clearable
            filterable
            placeholder="现有的重点产业，支持模糊搜索、选择"
            :options="industryTree"
            :props="{
              checkStrictly: true,
              multiple: true,
              value: 'code',
              label: 'name',
            }"
          ></el-cascader>
        </el-form-item>
        <!-- 意向产业 -->
        <el-form-item label="" prop="intendedIndustry" class="row-all">
          <template #label>
            <div class="form-label">意向产业</div>
          </template>
          <el-cascader
            id="intendedIndustry"
            ref="intendedIndustry"
            v-model="form.intendedIndustry"
            :disabled="disabled"
            class="w-full"
            clearable
            filterable
            placeholder="招商意向产业，支持模糊搜索、选择"
            :options="industryTree"
            :props="{
              checkStrictly: true,
              multiple: true,
              value: 'code',
              label: 'name',
            }"
          ></el-cascader>
        </el-form-item>
        <!-- 禁入产业 -->
        <!-- <el-form-item label="" prop="prohibitIndustry" class="row-all">
          <template #label>
            <div>禁入产业</div>
          </template>
          <el-input
            v-model="form.prohibitIndustry"
            :disabled="disabled"
            placeholder="输入禁止进入的产业类型"
          ></el-input>
        </el-form-item> -->
      </el-form>
    </div>

    <Save :disabled="loading" @onPreview="handlePreview" @onSave="handleSave" />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Save from '../common/Save.vue'
import addEditMixin, { ITreeKey } from '../common/addEditMixin'
const treeKey: ITreeKey[] = [
  { key: 'mainIndustry', refName: 'mainIndustry' },
  { key: 'intendedIndustry', refName: 'intendedIndustry' },
]

const defaultForm = {
  industryDesc: null,
  mainIndustry: [],
  intendedIndustry: [],
  prohibitIndustry: null,
}
export default Vue.extend({
  components: { Save },
  mixins: [addEditMixin({ defaultForm, treeKey, templateName: 'B_CONSOLE_PARK' })],
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: { ...defaultForm },
      rules: {},
    }
  },
  head: {
    title: '产业情况',
  },
  methods: {
    // handleMainIndustryChange() {
    //   const nodes = this.$refs.mainIndustry.getCheckedNodes()
    //   const labels = nodes.map((d) => d.label)
    //   console.log(labels)
    // },
    // handleIntendedIndustryChange() {
    //   const nodes = this.$refs.intendedIndustry.getCheckedNodes()
    //   const labels = nodes.map((d) => d.label)
    //   console.log(nodes)
    // },
  },
})
</script>
<style lang="scss" scoped>
@import '@/assets/scss/form.scss';
</style>
